<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="服务城市" prop="citycode">
            <el-input v-model="formData.city" disabled style="width: 150px"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="formData.age" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工龄" prop="lengthOld">
            <el-input v-model="formData.lengthOld" disabled/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="sex">
            <el-select
              v-model="formData.sex"
              disabled
              clearable
              class="!w-240px"
            >
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业" prop="job">
            <el-select
              v-model="formData.job"
              disabled
              clearable
              class="!w-240px"
            >
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.PEIZHEN_JOB_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="账号" prop="account">
            <el-input v-model="formData.account" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否缴纳保证金" prop="isEarnest" label-width="110px">
            <el-select
              v-model="formData.isStart"
              disabled
              clearable
              class="!w-240px"
            >
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.PEIZHEN_TRUE_FALSE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保证金" prop="earnestMoney">
            <el-input :precision="2" v-model="formData.earnestMoney" disabled/>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="头像" prop="pic" label-width="110px">
            <el-image :src="formData.pic" @click="imagePreview(formData.pic)"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证正面照片" prop="cardFront" label-width="110px">
            <el-image :src="formData.cardFront" @click="imagePreview(formData.cardFront)"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证反面照片" prop="cardReverse" label-width="110px">
            <el-image :src="formData.cardReverse" @click="imagePreview(formData.cardReverse)"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="支付宝账户" prop="payAccount">
            <el-input v-model="formData.payAccount" disabled placeholder="请输入支付宝账户"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付宝姓名" prop="payName">
            <el-input v-model="formData.payName" placeholder="请输入支付宝姓名" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否启用" prop="isStart">
            <el-select
              v-model="formData.isStart"
              placeholder="请选择"
              disabled
              clearable
              class="!w-240px"
            >
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.PEIZHEN_TRUE_FALSE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="简介" prop="brief">
            <el-input v-model="formData.brief" type="textarea" placeholder="请输入简介" disabled/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="审核状态" prop="brief">
            <el-select
              v-model="formData.isAudit"
              placeholder="请选择"
              clearable
              class="!w-240px"
            >
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.PEIZHEN_CONFIG_AUDIT)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="拒绝原因" prop="failCause" v-if="formData.isAudit==2">
            <el-input v-model="formData.failCause" type="textarea" placeholder="审核不通过原因"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import {getIntDictOptions, DICT_TYPE} from '@/utils/dict'
import {StaffApi, StaffVO} from '@/api/peizhen/staff'
import {createImageViewer} from "@/components/ImageViewer";

/** 陪诊师、护工 表单 */
defineOptions({name: 'CheckStaff'})

const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  name: undefined,
  age: undefined,
  lengthOld: undefined,
  sex: undefined,
  job: undefined,
  brief: undefined,
  account: undefined,
  password: undefined,
  balance: undefined,
  earnestMoney: undefined,
  provinceCode: undefined,
  province: undefined,
  cityCode: undefined,
  city: undefined,
  status: undefined,
  pic: undefined,
  cardFront: undefined,
  cardReverse: undefined,
  payAccount: undefined,
  payName: undefined,
  phone: undefined,
  isStart: undefined,
  isAudit: undefined,
  failCause: undefined,
  isEarnest: undefined,
  isServe: undefined,
})
const formRef = ref() // 表单 Ref


/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  dialogTitle.value = '信息查看'
  resetForm()
  // 修改时，设置数据
  formLoading.value = true
  try {
    formData.value = await StaffApi.getStaff(id)
  } finally {
    formLoading.value = false
  }

}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {

  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as StaffVO
    await StaffApi.updateStaff(data)
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    name: undefined,
    age: undefined,
    lengthOld: undefined,
    sex: undefined,
    job: undefined,
    brief: undefined,
    account: undefined,
    password: undefined,
    balance: undefined,
    earnestMoney: undefined,
    provinceCode: undefined,
    province: undefined,
    cityCode: undefined,
    city: undefined,
    status: undefined,
    pic: undefined,
    cardFront: undefined,
    cardReverse: undefined,
    payAccount: undefined,
    payName: undefined,
    phone: undefined,
    isStart: undefined,
    isAudit: undefined,
    failCause: undefined,
    isEarnest: undefined,
    isServe: undefined,
  }
  formRef.value?.resetFields()
}

//图片预览
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    zIndex: 9999999,
    urlList: [imgUrl]
  })
}
</script>
